/**新版登录页 */

import React, { useState } from "react";
import styles from "./index.module.less";
import qqImg from "@images/loginBg/login-qq.png";
import weChatImg from "@images/loginBg/login-wechat.png";
import GithubImg from "@images/loginBg/loginGithub";
import { useLocation } from "react-router-dom";
import { connect } from "react-redux";
import { registerAction, loginAction } from "@redux/actions02";
import SvgIcon from "@components/SvgIcon";
import toast from "@utils/showToast";
import defaultHead from "@images/sex0.webp";
import { Scrollbars } from "react-custom-scrollbars-2";

const sexCate = ["A Handsome Boy .", "A Noble Girl .", "Emm.. I Am Not Sure.."];

const Login02 = (props) => {
    const { registerAction, loginAction } = props;

    const local = useLocation();

    const [methodClass, setMethodClass] = useState([styles.active, ""]);
    const [mainClass, setMainClass] = useState("");
    const [isChecked, setIsChecked] = useState(false);
    const [isShowLogin, setIsShowLogin] = useState(null);
    const [isShowSexBounced, setIsShowSexBounced] = useState(false);
    const [sexKey, setSexKey] = useState(0);
    const [userName1, setUserName1] = useState("");
    const [password1, setPassword1] = useState("");
    const [isShow1, setIsShow1] = useState(false);
    const [userName2, setUserName2] = useState("");
    const [isShowEye, setIsShowEye] = useState(false);
    const [password2, setPassword2] = useState("");
    const [confirmPsw, setConfirmPsw] = useState("");
    const [headImg, setHeadImg] = useState("");
    const [headIndex, setHeadIndex] = useState(0);
    const [isShowHeadBounced, setShowHeadBounced] = useState(0);

    const startRegister = () => {
        if (!userName2) {
            toast.fail("注册用户名不能为空！");
            return;
        }

        if (userName2.length > 15) {
            toast.fail("用户名不能超过15个字符");
            return;
        }

        const reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
        if (reg.test(userName2)) {
            toast.fail("注册用户名不能有中文或中文字符 !");
            return;
        }

        if (!password2) {
            toast.fail("注册密码不能为空！");
            return;
        }

        if (!confirmPsw) {
            toast.fail("没有填写确认密码！");
            return;
        }

        if (password2 !== confirmPsw) {
            toast.fail("确认密码失败！");
            setConfirmPsw("");
            return;
        }

        if (!sexKey) {
            toast.fail("还没选择性别！");
            return;
        }

        if (!headImg) {
            toast.fail("请选择初始头像");
            return;
        }

        const from = local.state ? local.state.from : "/";

        registerAction(userName2, password2, sexKey, from, headImg);
    };

    const startLogin = () => {
        if (!userName1) {
            toast.fail("登录用户名不能为空！");
            return;
        }

        if (!password1) {
            toast.fail("登录密码不能为空！");
            return;
        }

        const from = local.state ? local.state.from : "/";

        loginAction(userName1, password1, from, isChecked);
    };

    return (
        <div className={styles.login02}>
            <div className={styles.login_bg}></div>
            <div
                className={` ${styles.login_bounced} 
    ${
        isShowLogin === 1
            ? styles.showLogin
            : isShowLogin === 0
            ? styles.hideLogin
            : ""
    }`}
            >
                <p className={styles.login_methods}>
                    <span
                        className={methodClass[0]}
                        onClick={() => {
                            setMethodClass([styles.active, ""]);
                            setMainClass(styles.showLeft);
                        }}
                    >
                        账号登录
                    </span>
                    <span
                        className={methodClass[1]}
                        onClick={() => {
                            setMethodClass(["", styles.active]);
                            setMainClass(styles.showRig);
                        }}
                    >
                        手机登录
                    </span>
                </p>
                <div className={`${styles.login_main} ${mainClass}`}>
                    <div className={`${styles.cont} ${styles.cont1}`}>
                        <input
                            type="text"
                            name="userName"
                            id="userName"
                            placeholder="用户名"
                            autoComplete="off"
                            value={userName1}
                            onChange={(e) => {
                                setUserName1(e.target.value.trim());
                            }}
                        />
                        <input
                            type={isShow1 ? "text" : "password"}
                            name="psd"
                            id="psd"
                            placeholder="密  码"
                            value={password1}
                            onChange={(e) => {
                                setPassword1(e.target.value.trim());
                            }}
                        />
                        <div className={styles.save_psd}>
                            <input
                                type="checkbox"
                                value={isChecked}
                                onChange={(e) => {
                                    setIsChecked(e.target.checked);
                                }}
                            />
                            <span
                                style={{ color: isChecked ? "#fff" : "#999" }}
                            >
                                记住密码
                            </span>
                            <span className={styles.forget_psd}>忘记密码?</span>
                        </div>
                        <div
                            className={styles.psw_l_eye}
                            onClick={() => {
                                setIsShow1(!isShow1);
                            }}
                        >
                            {isShow1 ? (
                                <SvgIcon font="icon-yanjing_xianshi2" />
                            ) : (
                                <SvgIcon font="icon-yanjing_yincang_o2" />
                            )}
                        </div>
                    </div>
                    <div className={`${styles.cont} ${styles.cont2}`}>
                        <input
                            type="text"
                            name="phoneNumber"
                            id="phoneNumber"
                            placeholder="手机号"
                            autoComplete="off"
                        />
                        <div className={styles.vertify_phone}>
                            <input
                                type="text"
                                name="vertifyPhone"
                                id="vertifyPhone"
                                placeholder="6位验证码"
                                autoComplete="off"
                                className={styles.vertifyPhone}
                            />
                            <button className={styles.receive_vCode}>
                                获取验证码
                            </button>
                        </div>
                    </div>
                </div>
                <button
                    className={styles.login_btn}
                    onClick={() => {
                        startLogin();
                    }}
                >
                    登 录
                </button>
                <p className={styles.to_register}>
                    <span
                        className={styles.no_user}
                        onClick={() => {
                            setIsShowLogin(0);
                        }}
                    >
                        还没账号?
                    </span>
                </p>
                <div className={styles.login_by_other}>
                    <p className={styles.other_title}>第三方账号登录</p>
                    <div className={styles.other_imgs}>
                        <img src={weChatImg} alt="" />
                        <img src={qqImg} alt="" />
                        <GithubImg />
                    </div>
                </div>
            </div>
            <div
                className={`${styles.register_bounced}
    ${
        isShowLogin === 1
            ? styles.hideRegister
            : isShowLogin === 0
            ? styles.showRegister
            : ""
    }`}
            >
                <p className={styles.title}>
                    {Array.from("Register...").map((item, index) => {
                        return (
                            <span
                                key={index}
                                className={`${styles.title_text} ${
                                    styles["title_text" + (index + 1)]
                                }`}
                            >
                                {item}
                            </span>
                        );
                    })}
                </p>
                <input type="text" style={{ display: "none" }} />
                <input
                    type="text"
                    className={styles.register_userName}
                    placeholder="用户名"
                    autoComplete="off"
                    value={userName2}
                    onChange={(e) => {
                        setUserName2(e.target.value.trim());
                    }}
                />
                <div
                    className={styles.psw_eye}
                    onClick={() => {
                        setIsShowEye(!isShowEye);
                    }}
                >
                    {isShowEye ? (
                        <SvgIcon font="icon-yanjing_xianshi2" />
                    ) : (
                        <SvgIcon font="icon-yanjing_yincang_o2" />
                    )}
                </div>
                {/* 用个隐藏的dom放前面，解决谷歌浏览器自动填充无法阻止的问题 */}
                <input
                    type="password"
                    name="password"
                    id="password"
                    style={{ display: "none" }}
                />
                <input
                    type={isShowEye ? "text" : "password"}
                    className={styles.register_psd}
                    placeholder="密码"
                    autoComplete="off"
                    value={password2}
                    onChange={(e) => {
                        setPassword2(e.target.value.trim());
                    }}
                />
                <input
                    type={isShowEye ? "text" : "password"}
                    className={styles.confirm_psd}
                    placeholder="再次输入密码"
                    autoComplete="off"
                    value={confirmPsw}
                    onChange={(e) => {
                        setConfirmPsw(e.target.value.trim());
                    }}
                />
                <div className={styles.select_sex}>
                    <span>{sexKey ? sexCate[sexKey - 1] : "性别"}</span>
                    <div
                        className={styles.select_icon}
                        onClick={() => {
                            setIsShowSexBounced(!isShowSexBounced);
                        }}
                    ></div>
                    <ul
                        className={styles.sex_ul}
                        style={{ display: isShowSexBounced ? "block" : "none" }}
                    >
                        {sexCate.map((item, index) => {
                            return (
                                <li
                                    key={index}
                                    onClick={() => {
                                        setSexKey(index + 1);
                                        setIsShowSexBounced(false);
                                    }}
                                >
                                    {item}
                                </li>
                            );
                        })}
                    </ul>
                </div>
                {/* <p className={styles.select_tip}>*选择性别后将为您提供合适的默认头像~</p> */}
                <div className={styles.head_select}>
                    <img
                        src={
                            headImg
                                ? require(`@images/head/${headImg}`)
                                : defaultHead
                        }
                        alt=""
                    />
                    <p
                        className={styles.to_select}
                        onClick={() => {
                            setShowHeadBounced(1);
                        }}
                    >
                        选择初始头像
                    </p>
                </div>
                <button
                    className={styles.register_btn}
                    onClick={() => {
                        startRegister();
                    }}
                >
                    注册
                </button>
                <p
                    className={styles.to_login}
                    onClick={() => {
                        setIsShowLogin(1);
                    }}
                >
                    已有账号?去登陆→
                </p>
            </div>
            <div
                className={`${styles.bounced_wrap} ${
                    isShowHeadBounced ? "" : styles.hide
                }`}
            >
                <div className={styles.bounced}>
                    <div className={styles.bounced_main}>
                        <Scrollbars autoHide>
                            <ul className={styles.head_ul}>
                                {new Array(34).fill(1).map((item, index) => {
                                    return (
                                        <li
                                            key={index}
                                            className={`${styles.head_li} ${
                                                headIndex === index + 1
                                                    ? styles.active
                                                    : ""
                                            }`}
                                            onClick={() => {
                                                setHeadIndex(index + 1);
                                            }}
                                        >
                                            <img
                                                src={`${
                                                    index === 19
                                                        ? require(`@images/head/20.gif`)
                                                        : require(`@images/head/${
                                                              index + 1
                                                          }.jpeg`)
                                                }`}
                                                alt=""
                                            />
                                        </li>
                                    );
                                })}
                            </ul>
                        </Scrollbars>
                    </div>
                    <div
                        className={styles.confirm_select}
                        onClick={() => {
                            setHeadImg(
                                headIndex === 20
                                    ? "20.gif"
                                    : `${headIndex}.jpeg`
                            );
                            setShowHeadBounced(0);
                        }}
                    >
                        确认
                    </div>
                </div>
            </div>
        </div>
    );
};

export default connect(
    (state) => ({
        reg: state.reducerBool,
    }),
    { registerAction, loginAction }
)(Login02);
